<template>
	<div style="height: 92vh;overflow-y: auto;z-index: 1;position: relative;background-color:#f5f5f5;">
		<!-- 	order-item -->

		<div @click="show" class="myorder">
			<div style="color: #00aaff">我的订单</div>
		</div>
<!--	{{this.$store.getters.items}}-->
		<div class="orderinfo"  v-for="item in isPay">
			<div class="orderinfo-body">
				<div class="orderinfo-logo">
					<img src="../assets/img/order.png">
				</div>
				<div class="orderinfo-content">
					<div class="orderinfo-head">
						<div class="title">
							<div class="name">
								<span>{{item.name}}</span>
								<p>></p>
							</div>
							<p>已送达</p>
						</div>
						<p>2021-08-21 11:51</p>
					</div>
					<div class="orderinfo-detail">
						<div style="flex:1"><span style="width: 55vw">{{item.description}}</span></div>
						<div style="display: flex;flex-direction: column"><span>¥{{(item.price*item.quantity).toFixed(2)}}</span> <span style="font-size: 8px;color: #666666">共{{item.quantity}}份</span></div>
					</div>
				</div>
			</div>
			<div class="orderinfo-bottom">
				<button type="button" class="card-button">再来一单</button>
				<button type="button" class="card-button alert">评价</button>
			</div>
		</div>
	</div>



</template>

<script>
	import {mapGetters,mapMutations,mapActions} from 'vuex'
	export default {
		name: "Order",
		data(){
			return{
			}
		},
		computed:{
			isPay(){
				return this.$store.getters.items.filter((product)=>{
					return product.isPay===true})
			},
			getdatatime(){
				let times=''
			},
			...mapGetters["items"]
		},
		methods:{

			show(){
			console.log(this.$store.getters.items)
			},

			...mapMutations({
				calculateShoppingPrice:'CALCULATE_SHOPPING_PRICE',

			}),

			...mapActions([
				'removeItemAll'
			])
		}
	}
</script>

<style scoped>
	* {
		margin: 0;
	}

	img {
		width: 15vw;
		height: 15vw;
	}
	.myorder{
		width: 96vw;
		height: 6vh;
		line-height: 6vh;
		font-size: 20px;
		font-weight: bold;
		padding-left: 4vw;
		background-color: #eeeeee;
		color: #aaaaaa;
		display: flex;
		justify-content: space-between;
	}

	.orderinfo {
		padding: 3.733333vw 0 0 4vw;
		margin-top: 1.666667vw;
		margin-bottom: 1.666667vw;
		background-color: #fff;
	}

	.orderinfo-body {
		display: flex;
	}

	.orderinfo-logo {
		padding-right: 2.666667vw;
	}

	.orderinfo-content {
		flex: 1;
	}

	.orderinfo-head {
		border-bottom: 1px solid #eee;
		padding-right: 3.466667vw;
		padding-bottom: 2.666667vw;
	}

	.orderinfo-head>p {
		font-size: 12px;
		color: #999;
	}

	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.title>p {
		font-size: 12px;

	}

	.name {
		display: flex;
	}

	.name>span {
		font-size: 16px;
		display: inline-block;
		width: 45vw;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.orderinfo-detail {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 4vw 3.466667vw 4vw 0;
	}

	.orderinfo-detail>div {

		font-size: 14px;
		color: #333;
		font-weight: 700;
	}

	.orderinfo-detail>div>span {
		font-size: 14px;
		color: #666;
		font-weight: 400;
		display: inline-block;
		width: 15vw;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.orderinfo-bottom {
		border-top: 1px solid #eee;
		padding: 2.666667vw 4.266667vw;
		display: flex;
		justify-content: flex-end;
	}

	.card-button {
		padding: 1.333333vw 2.666667vw;
		border: 1px solid #2395ff;
		border-radius: 5px;
		background-color: transparent;
		outline: none;
		font-size: 14px;
		color: #2395ff;
		margin-left: 2vw;
	}

	.alert {
		color: #ff5339;
		border-color: #ff5339;
	}

	.orderfooter {
		position: fixed;
		height:8vh;
		top: 92vh;
		
		background-color: #0085FF;
	}
</style>
